package com.csw.compose.ui.module.component.advanced

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateMapOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.csw.compose.theme.pagePadding
import com.csw.compose.ui.Destination
import com.csw.compose.ui.components.BodyText
import com.csw.compose.ui.components.LabelText
import com.csw.compose.ui.components.LargeSpacer
import com.csw.compose.ui.components.OlItem
import com.csw.compose.ui.components.PrimaryTitle
import com.csw.compose.ui.components.UlItem
import com.csw.compose.ui.module.BasePage

@Preview
@Composable
fun SegmentedButtonPagePreview() {
    BasePage({}, "分段按钮") {
        SegmentedButtonPage()
    }
}

class SegmentedButtonPageData {
    companion object : Destination("SegmentedButtonPage")
}

/**
 *[参考](https://developer.android.google.cn/develop/ui/compose/components/segmented-button?hl=zh-cn)
 */
@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SegmentedButtonPage() {
    Column(
        modifier = Modifier
            .padding(horizontal = pagePadding)
            .verticalScroll(rememberScrollState())
    ) {
        PrimaryTitle("简介")
        BodyText("分段按钮，默认实现边框并且第一个和最后一个按钮圆角的，带选中标志和动画")

        val items = remember { listOf("Day", "Month", "Week") }
        val selected = remember { mutableStateOf(items[0]) }
        SingleChoiceSegmentedButtonRow(
            space = (-10).dp
        ) {
            items.forEachIndexed { index, item ->
                SegmentedButton(
                    selected = item == selected.value,
                    onClick = { selected.value = item },
                    label = {
                        Text(item)
                    },
                    shape = SegmentedButtonDefaults.itemShape(index, items.size)
                )
            }
        }
        UlItem("SegmentedButton")
        LabelText("分段按钮单元")
        UlItem("SingleChoiceSegmentedButtonRow")
        LabelText("单选分段按钮行")
        OlItem(1,"space")
        LabelText("按钮重叠宽度")

        LargeSpacer()
        val selecteds = remember { mutableStateMapOf(items[0] to items[0]) }
        MultiChoiceSegmentedButtonRow {
            items.forEachIndexed { index, item ->
                SegmentedButton(
                    checked = selecteds.contains(item),
                    onCheckedChange = {
                        if (it) {
                            selecteds[item] = item
                        } else {
                            selecteds.remove(item)
                        }
                    },
                    label = {
                        Text(item)
                    },
                    shape = SegmentedButtonDefaults.itemShape(index, items.size)
                )
            }
        }
        UlItem("MultiChoiceSegmentedButtonRow")
        LabelText("多选分段按钮行")
    }
}